<template>
  <tr class="input-item" >
    <td></td>
    <td><p class="input-desc" :class="{error:showError}" v-html="message"></p></td>
  </tr>
</template>

<script>
export default {
  name: 'inputDesc',
  props: ['desc', 'validate', 'hasInput'],
  computed: {
    message(){
      return this.showError ? this.validate.info : this.desc;
    },
    showError(){
      return this.hasInput && this.validate && !this.validate.ok
    }
  }
};
</script>

<style lang="less">
.input-item {
  .input-desc {
    margin-top: 8px;
    padding-bottom: 18px;
    color: #999;
    font-size: 12px;
    line-height: 1.5em;
    transition: .5s;
    &.error  {
      color: #ff6152;
    }
  }
}
</style>